در قسمت قبل از مجموعه آموزش‌های HTML به زبان ساده، با نحوه‌ی قرار دادن جداول آشنا شدیم. در این شماره قصد داریم تا جدولها را با تغییرات بیشتری همراه کنیم. با ما همراه شوید.
در ادامه با کافه دوستی همراه باشید.
تغییر در جداول
جداول در اچ تی ام ال قابلیت‌ها و ویژگی‌های بسیاری دارند. همانطور که گفتیم یکی از خاصیت‌های مهم آن‌ها امکان ایجاد لایه‌بندی و استخوان‌بندی صفحه است. اما جدول‌هایی که ما در بخش پیش ایجاد کرده‌ایم، چندان ظاهر جذابی نداشتند. به همین خاطر ما در این جلسه قصد داریم تا تغییرات بیشتری را بر روی ظاهر جداولمان ایجاد نماییم. برای مثال شما می‌توانید قاب دور تا دور جدول را به دلخواه خود تغییر دهید.
ما در این قسمت به دو مورد از قابلیت‌های مهم در جداول اشاره خواهیم کرد: هدر و قاب.
اضافه‌کردن قاب:
برای قرار دادن قاب دور جدولها تنها کافیست که اتریبیوت border را به تگ <table> اضافه نمایید. در مثال زیر ما یک قاب یک پیکسلی به دور جدول کشیده‌ایم. این قاب به تمامی بخش‌های جدول ما و در بین تمامی سلول‌ها و سطر‌ها کشیده خواهد شد.
نمونه کد
<table border="1px" >
<tr><!-- شروع خط اول -->
<td>خط اول - ستون اول </td>
<td>خط اول - ستون دوم</td>
<td>خط اول - ستون سوم</td>
</tr><!-- پایان خط اول -->
<tr> <!-- شروع خط دوم -->
<td>خط دوم - ستون اول </td>
<td>خط دوم- ستون دوم</td>
<td>خط دوم - ستون سوم</td>
</tr><!-- پایان خط دوم -->
<tr> <!-- شروع خط سوم-->
<td>خط سوم - ستون اول </td>
<td>خط سوم - ستون دوم</td>
<td>خط سوم - ستون سوم</td>
</tr><!-- پایان خط سوم-->
</table>
نتیجه‌ای که مرورگر نمایش خواهد داد
| خط اول - ستون اول | خط اول - ستون دوم | خط اول - ستون سوم |
| خط دوم - ستون اول | خط دوم - ستون دوم | خط دوم - ستون سوم |
| خط سوم - ستون اول | خط سوم - ستون دوم | خط سوم - ستون سوم |
نکته: شما می‌توانید از طریق اضافه کردن اتریبیوت استایل به جدول خود نیز قاب را ایجاد نمایید.";table style ="border:1px
حالا که بیشتر با نحوه‌ی استفاده از قاب در جداول آشنا شدیم، بد نیست اگر چند جدول با حاشیه‌های مختلف ایجاد نمایید.
سرفصل در جدول:
شما در اچ تی ام ال می‌توانید جدول‌های منظم‌تر و دقیق‌تری ترسیم کنید. در واقع یک جدول تنها شامل یک سطر و ستون نمی‌شود و باید دارای سرفصل‌هایی نیز باشد. مثلا ما می‌خواهیم جدولی درست کنیم که در آن نام و نام خانوادگی افراد و سن آن‌ها یادداشت شود. در این جدول، عناوینی همچون «نام»،«نام خانوادگی» و «سن» عناوین یا همان سرفصل‌های جدول شما هستند و مشخصات افراد که در زیر آن‌ها قرار می‌گیرد داده‌های جدول. حالا بیایید همین مثال را به زبان اچ تی ام ال پیاده‌سازی کنیم.
جدول در اچ تی ام ال شامل دو بخش است:
عنوان جدول: عناوین را در اولین سطر جدول می‌نویسند و متن داخل آن‌ها با تگ <th> نوشته می‌شود .
داده‌های جدول: داده‌های جدول مشابه قبل در سطرهای بعدی و ستون‌های بعدی نوشته می‌شود.
نمونه کد
<table border="1px" >
<tr><!-- - شروع خط مربوط به عناوین -->
<th>خط عنوان - نام </th>
<th>خط عنوان- نام خانوادگی</th>
<th>خط عنوان-سن</th>
</tr> <!-- - پایان خط مربوط به عناوین -->
<tr> <!-- شروع خط دوم -->
<td>خط دوم - ستون اول </td>
<td>خط دوم- ستون دوم</td>
<td>خط دوم - ستون سوم</td>
</tr><!-- پایان خط دوم -->
<tr> <!-- شروع خط سوم-->
<td>خط سوم - ستون اول </td>
<td>خط سوم - ستون دوم</td>
<td>خط سوم - ستون سوم</td>
</tr><!-- پایان خط سوم-->
</table>
نتیجه‌ای که مرورگر نمایش خواهد داد
| خط عنوان- نام | خط عنوان- نام خانوادگی | خط عنوان - سن |
| خط دوم - ستون اول | خط دوم - ستون دوم | خط دوم - ستون سوم |
| خط سوم - ستون اول | خط سوم - ستون دوم | خط سوم - ستون سوم |
تگ <th>همانطور که متوجه شدید، عنوان جدول ماست که بهتر است در اولین سطر جدول قرار بگیرد. ولی باید بدانید که ما می‌توانیم عنوان‌های مختلفی را برای هر سطر و به صورت جداگانه استفاده کنیم. بدین ترتیب هر ستون جداول نیز می‌تواند یک هدر مخصوص خود را داشته باشد.
نکته: راه حل دیگر برای گروه‌بندی و نوشتن جداول استفاده از در صورت استفاده از <tbody> و <thead> است. با استفاده از این تگ کلیات جدول شما دارای یک تگ جدید می‌شود؛ ولی ما در این آموزش صرفا جدول‌هایمان را بدون استفاده از این تگ‌ها می‌نویسیم. البته در هر حالت نتیجه جدول شما یکسان خواهد بود.
colspan:
جدولی را با سه سطر که هر سطر شامل سه ستون می‌شود در نظر بگیرید. شاید زمانی پیش خودتان فکر کنید اگر بخواهم تمامی ستون‌های یک سطر را یکسان کنم، چگونه باید این کار را انجام دهم. این کار از طریق اتریبیوت colspan انجام می‌شود.
برای بزرگ کردن یکی از ستون‌های جدول به اندازه چند ستون ( یا همان ترکیب چند ستون در یک ستون) از اتریبوت"تعداد ستون‌های مورد نظر برای یکی شدن" = colspan استفاده می‌شود. به مثال زیر دقت کنید تا بهتر منظورمان را متوجه شوید.
نمونه کد
<table border="1px" >
<tr><!-- شروع خط اول -->
<td>خط اول - ستون اول </td>
<td>خط اول - ستون دوم</td>
<td>خط اول - ستون سوم</td>
</tr><!-- پایان خط اول -->
<tr> <!-- شروع خط دوم -->
<td>خط دوم - ستون اول </td>
<td>خط دوم- ستون دوم</td>
<td>خط دوم - ستون سوم</td>
</tr><!-- پایان خط دوم -->
<tr> <!-- شروع خط سوم-->
<td colspan="3">خط سوم و یکپارچه کردن سه ستون در یک ستون </td>
</tr><!-- پایان خط سوم-->
</table>
نتیجه‌ای که مرورگر نمایش خواهد داد
| خط اول - ستون اول | خط اول - ستون دوم | خط اول - ستون سوم |
| خط دوم - ستون اول | خط دوم - ستون دوم | خط دوم - ستون سوم |
| خط سوم و یکپارچه کردن سه ستون در یک ستون | ||
تایم لپس چیست ؟ طرز کار تصاویر Time Lapse شارژ کردن گوشی با شارژر های مختلف آپدیت جدید تلگرام: بخش استیکرهای محبوب، فضای شخصی نامحدود و موار گلکسی نوت 7 به طور رسمی معرفی شداسکنر عنبیه چشم و 4 گیگابایت حاف جوانسازی پوست فقط در 28 روز !؟ سارقان مسلح از بازی Pokemon Go برای به دام انداختن قربانیان استف عملکرد سنسور عنبیه گلکسی نوت 7 فاش شد این تکنیک آرایشی به سرعت جوش های صورت تان را می پوشاند!!! جرم گرفتن دندان به دلیل 7 خطا